Menú vertical Accordion de jQuery

Añadir un menú no es tarea sencilla no lo digo porque sea complicado sino por la tarea de escoger el menú adecuado o que más se adapte a nuestras necesidades y gustos.

Este menú resulta vistoso y da mucho juego, requiere utilizar un alojamiento externo para los script pero no es tarea difícil hacerlo.

Descargamos el archivo ddaccordion.js "Y lo alojamos en el servidor que solemos usar"

Nos ubicamos justo antes de </head> y añadimos:





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src='aqui-url-archivo-ddaccordion.js' type='text/javascript'/>

En aqui-url-archivo-ddaccordion.js lo sustituimos por la url de nuestro archivo.

A continuación copiamos el contenido de este archivo y lo pegamos justo después de los scripts.

Por último y justo después añadimos los estilos [+/-]

<style type="text/css">
.applemenu{
margin: 5px 0;
padding: 0;
width: 215px; /*ancho del menú*/
border: 1px solid #9A9A9A; /*color de borde*/
}
.applemenu div.silverheader a{ /*títulos-barras del menú*/
background: black url(aquí-url-imagen-gris) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: #FFF; /*color títulos barras gris*/
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(aquí-url-imagen-azul);
color: #FFF;/*color texto barra azul*/
}
.applemenu div.submenu{ /*contenido del menú- altura*/
background-color:#F4F4F4;;/*color de fondo*/
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
</style>

Estas son las imágenes del menú que podemos sustituir por otras o utilizarlas.

En cualquier entrada de Blogger podemos subirlas para conseguir la url que añadimos donde dice aquí-url-imagen-azul y aquí-url-imagen-gris

Guardamos los cambios y nos dirigimos a plantilla de diseño donde añadiéremos un nuevo gadget escogiendo la pestaña HTML/Javascript

En su interior añadimos lo que mostráremos en el menú, enlaces, imágenes o cualquier contenido [+/-]

<div class="applemenu">
<div class="silverheader"><a href="Url-Enlace">Título 1 y enlace</a></div>
<div class="submenu">
Primer contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 2 y enlace</a></div>
<div class="submenu">
Segundo contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 3 ó enlace</a></div>
<div class="submenu">
Tercer contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 4 y enlace</a></div>
<div class="submenu">
Cuarto contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 5 y enlace</a></div>
<div class="submenu">
Quinto contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 6 y enlace</a></div>
<div class="submenu">
Sexto contenido<br/>
</div>

<div class="silverheader"><a href="Url-Enlace">Título 7 y enlace</a></div>
<div class="submenu">
Séptimo contenido<br/>
<br/>
</div></div>

He añadido color en las partes que podemos modificar y texto para localizarlas.
Una observación, cada barra del menú puede usarse a la vez de enlace.

» Visto en : Dynamic Drive donde podéis ver el original.